<style lang="scss" scoped src="./index.scss"></style>
<template>
    <page-box>
        <template v-slot:header>
            <ask-breadcrumb>
                <ask-breadcrumb-item to="/example" name="ExampleHome"></ask-breadcrumb-item>
                <ask-breadcrumb-item>Utils工具函数</ask-breadcrumb-item>
            </ask-breadcrumb>
            <page-search-column class="tab-column">
                <el-tabs class="theme-gray center" v-model="typeValue">
                    <el-tab-pane
                        v-for="item in typeList"
                        :label="item.label"
                        :key="item.value"
                        :name="item.value"
                    >
                        <div slot="label" class="el-tab__label">{{item.label}}</div>
                    </el-tab-pane>
                </el-tabs>
            </page-search-column>
        </template>
        <component
            v-bind:is="'utils-' + typeValue"
        ></component>
    </page-box>
</template>

<script lang="ts">
import { Component, Mixins } from "vue-property-decorator";
import FormMixin from "@/mixins/form.mixin.base.ts";

import UtilsBase from "./src/base.vue";
@Component({
    components: {
        UtilsBase
    }
})
export default class ExampleIconSvg extends Mixins(FormMixin) {
    typeValue = "base";
    typeList = [
        {
            label: "基础函数",
            value: "base"
        },
        {
            label: "原始对象扩展",
            value: "extension"
        }
    ];
}
</script>
